@import '../../../styles/variables';

.selectInput {
  position: relative;

  .dropdown {
    box-sizing: border-box;
    width: 100%;
    max-height: 180px;
    overflow: auto;
    background: var(--input-background);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border-top: none;
    border-radius: 0 0 4px 4px;
    margin-top: -19px;
    z-index: 1;

    .dropdownItem {
      padding: 10px 20px;
      font-size: 14px;
      cursor: pointer;

      &:hover {
        background: var(--input-select-hover);
      }

      .highlight {
        font-weight: 600;
      }
    }

    &.noSearchResults {
      padding: 10px 20px;
      color: #9e9e9e;
      text-align: center;
      font-size: 14px;
      font-style: italic;
    }
  }

  .selectInputTransparent {
    background: transparent;
  }
}
